<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="GoJun" />
	
	
	
	<title>Android 原生项目如何引入 Flutter ｜ GoJun</title>
	
    
    
    <meta name="description" content="有两种方式创建，一种使用 Android Studio 创建集成 Flutter 模块，一种通过命令创建手动集成。 最开始使用 Android Studio 创建，但是一直卡在 Creating Flutter Project 网上查了很多解决方法均无法解决，因此我是通过手动集成的。 一、创建 Flutter 模块 打开终端选择自己指定的" />
    

    
    
    <meta name="keywords" content="Hugo, theme, zozo" />
    

	
    
    <link rel="shortcut icon" href="https://gojun.me/images/favicon.ico" />

    <link rel="stylesheet" type="text/css" media="screen" href="https://gojun.mecss/normalize.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://gojun.me/css/zozo.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://gojun.me/css/highlight.css" />

    
    
</head>

<body>
    <div class="main animate__animated animate__fadeInDown">
        <div class="nav_container animated fadeInDown">
    <div class="site_nav" id="site_nav">
        <ul>
            
            <li>
                <a href="/">Home</a>
            </li>
            
            <li>
                <a href="/posts/">Archive</a>
            </li>
            
            <li>
                <a href="/tags/">Tags</a>
            </li>
            
            <li>
                <a href="/projects/">Projects</a>
            </li>
            
        </ul>
    </div>
    <div class="menu_icon">
        <a id="menu_icon"><i class="ri-menu-line"></i></a>
    </div>
</div>
        <div class="header animated fadeInDown">
    <div class="site_title_container">
        <div class="site_title">
            <h1>
                <a href="https://gojun.me">
                    <span>GoJun</span>
                </a>
            </h1>
        </div>
        <div class="description">
            <p class="sub_title">为向往生活努力奋斗！</p>
            <div class="my_socials">
                
                
                <a href="https://github.com/freelander" title="github" target="_blank"><i class="ri-github-fill"></i></a>
                
                
                <a href="https://gojun.me/index.xml" type="application/rss+xml" title="rss" target="_blank"><i
                        class="ri-rss-fill"></i></a>
            </div>
        </div>
    </div>
</div>
        <div class="content">
            <div class="post_page">
                <div class="post animate__animated animate__fadeInDown">
                    <div class="post_title post_detail_title">
                        <h2><a href='/posts/flutter-native/'>Android 原生项目如何引入 Flutter</a></h2>
                        <span class="date">2020.03.05</span>
                    </div>
                    <div class="post_content markdown"><p>有两种方式创建，一种使用 Android Studio 创建集成 Flutter 模块，一种通过命令创建手动集成。</p>
<p>最开始使用 Android Studio 创建，但是一直卡在 <code>Creating Flutter Project </code> 网上查了很多解决方法均无法解决，因此我是通过手动集成的。</p>
<h3 id="一创建-flutter-模块">一、创建 Flutter 模块</h3>
<p>打开终端选择自己指定的路径下，通过以下命令创建模块：</p>
<div class="highlight"><pre class="chroma"><code class="language-fallback" data-lang="fallback">flutter create - t module --org com.chicdeals.flutter ky_flutter
</code></pre></div><p>创建完之后，打开 <code>pubspec.yaml</code> 文件拉到最后看到比平常创建的 Flutter 项目多出下面信息：</p>
<div class="highlight"><pre class="chroma"><code class="language-fallback" data-lang="fallback">  # This section identifies your Flutter project as a module meant for
  # embedding in a native host app.  These identifiers should _not_ ordinarily
  # be changed after generation - they are used to ensure that the tooling can
  # maintain consistency when adding or modifying assets and plugins.
  # They also do not have any bearing on your native host application&#39;s
  # identifiers, which may be completely independent or the same as these.
  module:
    androidX: true
    androidPackage: com.chicdeals.flutter.ky_flutter
    iosBundleIdentifier: com.chicdeals.flutter.ky_flutter
</code></pre></div><p>修改下信息，去掉包名后面的 <code>.ky_flutter</code> 简短下包名。</p>
<h3 id="二android-项目引入-java8">二、Android 项目引入 Java8</h3>
<p>在尝试将 Flutter 模块项目集成到宿主 Android 应用之前，请先确保宿主 Android 应用的 <code>build.gradle</code> 文件的 <code>android { }</code> 块中声明了以下源兼容性，例如：</p>
<div class="highlight"><pre class="chroma"><code class="language-fallback" data-lang="fallback">android {
  //...
  compileOptions {
    sourceCompatibility 1.8
    targetCompatibility 1.8
  }
}
</code></pre></div><h3 id="三将-flutter-module-作为依赖项">三、将 Flutter module 作为依赖项</h3>
<h4 id="方案a---依赖-aar">方案A - 依赖 AAR</h4>
<p>这种方式会将 Flutter 库打包成由 AAR 和 POM artifacts 组成的本地 Maven 存储库。这种方案可以使你的团队不需要安装 Flutter SDK 即可编译宿主应用。</p>
<ol>
<li>在你的 Flutter 模块路径下，执行如下命令：</li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-fallback" data-lang="fallback">flutter build aar
</code></pre></div><p>构建完成后，终端会输出如何完成集成操作的提示。</p>
<p>

<div class="fancybox">
<a data-fancybox="demo" href="/images/2020/03/native_flutter_01.png">
<img src="/images/2020/03/native_flutter_01.png" alt="image"  />
</a>
</div>

</p>
<p>需要注意的是以下配置是放在最外层位置：</p>
<div class="highlight"><pre class="chroma"><code class="language-fallback" data-lang="fallback">repositories {
        maven {
            url &#39;/Users/apple/FlutterDev/project/ky_flutter/build/host/outputs/repo&#39;
        }
        maven {
            url &#39;https://storage.googleapis.com/download.flutter.io&#39;
        }
      }
</code></pre></div><p>应用只配置 debug、pre、release 构建模式，因此在引用的时候，可以这样配置：</p>
<div class="highlight"><pre class="chroma"><code class="language-gradle" data-lang="gradle"><span class="n">debugImplementation</span> <span class="s1">&#39;com.chicdeals.flutter:flutter_debug:1.0&#39;</span>
<span class="n">preImplementation</span> <span class="s1">&#39;com.chicdeals.flutter:flutter_profile:1.0&#39;</span>
<span class="n">releaseImplementation</span> <span class="s1">&#39;com.chicdeals.flutter:flutter_release:1.0&#39;</span>
</code></pre></div><blockquote>
<p>如果你是使用 Android Studio 开发工具，你也可以直接点击 Android Studio 菜单中的 Build &gt; Flutter &gt; Build AAR 为 Flutter 模块构建 AAR。</p>
</blockquote>
<p>

<div class="fancybox">
<a data-fancybox="demo" href="/images/2020/03/native_flutter_02.png">
<img src="/images/2020/03/native_flutter_02.png" alt="image"  />
</a>
</div>

</p>
<h4 id="方案-b---依赖模块的源码">方案 B - 依赖模块的源码</h4>
<p>该方式可以使你的 Android 项目和 Flutter 项目能够同步一键式构建。当你需要同时在这两个项目中进行快速迭代时，这种方案非常方便，但是此时，你的团队必须安装 Flutter SDK 才能构建宿主应用程序。</p>
<p>具体实现方式，如有需要请看官方指导文档，在这里我就不做简述了，因为我是使用方案A，没有选择方案 B。</p>
<h3 id="参考链接">参考链接</h3>
<ul>
<li><a href="https://flutter.dev/docs/development/add-to-app/android/project-setup">将 Flutter module 集成到 Android 项目</a></li>
</ul>
</div>
                    <div class="post_footer">
                        
                        <div class="meta">
                            <div class="info">
                                <span class="field tags">
                                    <i class="ri-stack-line"></i>
                                    
                                    <a href="https://gojun.me/tags/flutter/">Flutter</a>
                                    
                                </span>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                
                <div class="doc_comments"></div>
                
            </div>
        </div>
    </div>
    <a id="back_to_top" href="#" class="back_to_top"><i class="ri-arrow-up-s-line"></i></a>
    <footer class="footer">
    <div class="footer_slogan">
        <span></span>
    </div>
</footer>
    <script src="https://gojun.me/js/jquery-3.5.1.min.js"></script>
<link href="https://gojun.me/css/fancybox.min.css" rel="stylesheet">
<script src="https://gojun.me/js/fancybox.min.js"></script>
<script src="https://gojun.me/js/zozo.js"></script>


<script type="text/javascript" async
    src="https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\[\[', '\]\]']],
                processEscapes: true,
                processEnvironments: true,
                skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
                TeX: {
                    equationNumbers: { autoNumber: "AMS" },
                    extensions: ["AMSmath.js", "AMSsymbols.js"]
                }
            }
        });

        MathJax.Hub.Queue(function () {
            
            
            
            var all = MathJax.Hub.getAllJax(), i;
            for (i = 0; i < all.length; i += 1) {
                all[i].SourceElement().parentNode.className += ' has-jax';
            }
        });
    </script>

<style>
    code.has-jax {
        font: inherit;
        font-size: 100%;
        background: inherit;
        border: inherit;
        color: #515151;
    }
</style>



<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'UA-142037913-1', 'auto');
	
	ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

</body>

</html>